<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>axios基本使用</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js"></script>
</head>

<body>
  <button>点击发送 GET 请求</button>
  <button>点击发送 GET 请求2</button>
  <button>点击发送 POST 请求</button>
  <button>点击发送 PUT 请求</button>
  <button>点击发送 DELETE 请求</button>
</body>


<script>

  /* 
  axios语法: config是配置对象
  axios(config)  
    method: 请求方式
    url: 请求地址  params参数在这里用?指定
    params: 指定query参数  值为包含多个参数的对象
    data: body参数(请求体参数) 值有两种
      urlencoded字符串: 'a=1&b=2'
      js对象: {a: 1, b: 2}
    headers: 包含n个请求头的对象
    timeout: 超时时间
    baseURL: 基础地址
  */



  const btns = document.querySelectorAll('button')

  // 发起get请求
  // then方法
  btns[0].onclick = () => {
    axios({
      method: 'get',
      // url: 'http://localhost:3000/movie/2  // 不要带params参数了
      url: 'http://localhost:3000/movie', // 传递query参数
      params: {
        id: 2,
        name: '大话西游'
      }
    }).then(
      response => {
        console.log(response.data);
      },
      error => {
        console.log(error);
      }
    )
  }

  //  async + await 
  /* 
  在promise左边加上 await   await也被叫做await表达式  结果是promise的成功的value
  await所在的函数 左侧加上 async  async是函数
  用 async  await 时  用try...catch来得到异步成功和失败
  */
  btns[1].onclick = async () => {
    try {
      const response = await axios({
        method: 'get',
        url: 'http://localhost:3000/movie',
        params: {
          id: 2,
          name: '大话西游'
        }
      })
      // axios默认请求是get
      // const response = await axios(`http://localhost:3000/movie?id=2&name=大话西游2`)
      console.log(response.data)
    } catch (error) {
      console.log(error);
    }
  }

  // post请求
  btns[2].onclick = async () => {
    const response = await axios({
      method: 'post',
      url: 'http://localhost:3000/movie',
      data: 'name=九品芝麻官&director=周星驰'
    })
    console.log(response.data);
  }


  // put请求  (替换/更新)
  btns[3].onclick = async () => {
    const response = await axios({
      method: 'put',
      // 指定id
      url: 'http://localhost:3000/movie/8',
      data: {
        //内部会自动转换为JSON格式  并指定相应的Content-Type请求头
        name: '奔跑吧',
        director: '邓超'
      }
    })
    console.log(response.data);
  }


  // delete请求  删除
  btns[4].onclick = async () => {
    const response = await axios({
      method: 'delete',
      // 指定id
      url: 'http://localhost:3000/movie/8'
    })
    console.log(response.data);
  }





</script>

</html>